<template>
	<view class="wrap">
		<view class="back" @click="back">
			<image src="../../static/images/icon-back-white.png" mode=""></image>
		</view>
		<view class="share">
			<image src="../../static/images/icon-share-white.png" mode=""></image>
		</view>
		<u-swiper :height="750" :list="goodsInfo.showImages" border-radius="0" :autoplay="false" @click="onBannerClick">
		</u-swiper>
		<view class="base bw">
			<view class="base-title">{{goodsInfo.productName}}</view>
			<view class="base-item app_flex-jcsb">
				<view class="base-item_L">
					<text>剪样：</text>
					<text>￥{{goodsInfo.jyPrice}}</text>
					<text>/{{goodsInfo.unit}}</text>
				</view>
				<view class="base-item_R">月销：{{goodsInfo.saleNum}}</view>
			</view>
			<view class="base-item app_flex-jcsb">
				<view class="base-item_L">
					<text>大货：</text>
					<text>￥{{goodsInfo.salePrice}}</text>
					<text>/{{goodsInfo.unit}}（{{goodsInfo.emptyDiff}}）</text>
				</view>
				<view class="base-item_R">库存：0</view>
			</view>
		</view>
		<view class="attr app_arrow app_flex-aic bw" @click="showAttrPop = true">
			<view class="attr-label">产品参数</view>
			<view class="attr-content app_ellipsis">品牌 规格 成分...</view>
		</view>
		<view class="detail">
			<view class="detail-title">商品详情</view>
			<view class="detail-main">
				<!-- <image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="widthFix"></image> -->
				<u-parse :html="goodsInfo.content"></u-parse>
			</view>
		</view>
		<u-popup v-model="showAttrPop" mode="bottom" safe-area-inset-bottom border-radius="16">
			<view class="attrPop">
				<view class="attrPop-header">产品参数</view>
				<view class="attrPop-main">
					<view class="attrPop-item u-flex">
						<view class="attrPop-item_label">产品属性</view>
						<view class="attrPop-item_content">{{goodsExt.attribute}}</view>
					</view>
					<view class="attrPop-item u-flex">
						<view class="attrPop-item_label">产品成分</view>
						<view class="attrPop-item_content">{{goodsExt.component}}</view>
					</view>
					<view class="attrPop-item u-flex">
						<view class="attrPop-item_label">布封</view>
						<view class="attrPop-item_content">{{goodsExt.wide}}</view>
					</view>
					<view class="attrPop-item u-flex">
						<view class="attrPop-item_label">产品克重</view>
						<view class="attrPop-item_content">{{goodsExt.weight}}</view>
					</view>
					<view class="attrPop-item u-flex">
						<view class="attrPop-item_label">色牢度</view>
						<view class="attrPop-item_content">{{goodsExt.colorFastness}}</view>
					</view>
					<view class="attrPop-item u-flex">
						<view class="attrPop-item_label">适合用途</view>
						<view class="attrPop-item_content">{{goodsExt.purpose}}</view>
					</view>
				</view>
				<view class="attrPop-btn">
					<g-btn @click="showAttrPop = false"></g-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				goodsInfo: {},
				list: [],
				showAttrPop: false, // 产品参数弹窗
				goodsExt: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.updatePage()
		},
		methods: {
			updatePage() {
				this.getGoodsInfo()
				this.getDetailExt()
			},
			back() {
				let route = getCurrentPages()
				if (route.length >= 2) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/home/index'
					})
				}
			},
			getGoodsInfo() {
				this.$g_api.productDetailProduct({
					productId: this.id
				}).then(({
					data
				}) => {
					try{
						console.log(data);
						if (!data) return
						if (data.cover) {
							data.cover = data.cover.split(',')
							data.cover = data.cover.map(item => {
								item = this.$g_util.concatRequestUrl(item)
								return {
									image: item
								}
							})
						}
						if (data.showImages) {
							data.showImages = data.showImages.split(',')
							data.showImages = data.showImages.map(item => {
								item = this.$g_util.concatRequestUrl(item)
								return {
									image: item
								}
							})
						}
						data.logoImg = this.$g_util.concatRequestUrl(data.logoImg)
						if(data.content) {
							// data.content = data.content.replace(/<img src="\/profile/g,`<img src="${this.$g_config.requestUrl}/profile`)
							// data.content = data.content.replace(/<img src='\/profile/g,`<img src="${this.$g_config.requestUrl}/profile`)
						}
						console.log(data);
						this.goodsInfo = data
					}catch(e){
						console.log(e);
						//TODO handle the exception
					}
					
				})
			},
			/**
			 * 获取商品扩展信息
			 */
			getDetailExt() {
				this.$g_api.productDetailExt({
					productId: this.id
				}).then(({
					data
				}) => {
					this.goodsExt = data
				})
			},
			onBannerClick(index) {
				const showImages = this.goodsInfo.showImages.map(item => item.image)
				if (Array.isArray(showImages)) {
					uni.previewImage({
						urls: showImages,
						current: showImages[index]
					})
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.wrap {}

	.back {
		position: fixed;
		left: 30rpx;
		top: calc(var(--status-bar-height) + 20rpx);
		font-size: 0;
		// width: 60rpx;
		// height: 60rpx;
		z-index: 999;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.share {
		position: fixed;
		right: 30rpx;
		top: calc(var(--status-bar-height) + 20rpx);
		font-size: 0;
		// width: 60rpx;
		// height: 60rpx;
		z-index: 999;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.base {
		width: 710rpx;
		padding: 30rpx 20rpx;
		margin: 20rpx auto 0;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.base-title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.base-item {}

	.base-item_L {
		text {
			&:nth-child(1) {
				font-size: 26rpx;
			}

			&:nth-child(2) {
				font-size: 32rpx;
				color: #ff4c4c;
			}

			&:nth-child(3) {
				font-size: 18rpx;
				color: #999;
			}
		}
	}

	.base-item_R {
		font-size: 24rpx;
		color: #999;
	}

	.attr {
		width: 710rpx;
		height: 100rpx;
		padding: 0 20rpx;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;

		&::after {
			right: 30rpx;
		}
	}

	.attr-label {
		margin-right: 30rpx;
		color: #999;
	}

	.attr-content {
		max-width: 470rpx;
	}

	.detail {}

	.detail-title {
		line-height: 90rpx;
		padding-left: 30rpx;
		font-weight: bold;
	}

	.detail-main {
		image {
			width: 750rpx;
		}

		// font-size: 0;
	}

	.attrPop {}

	.attrPop-header {
		font-size: 32rpx;
		line-height: 90rpx;
		text-align: center;
	}

	.attrPop-main {
		padding: 44rpx 30rpx 10rpx;
	}

	.attrPop-item {
		margin-bottom: 46rpx;
		line-height: 1;
		font-size: 26rpx;
	}

	.attrPop-item_label {
		width: 142rpx;
		color: #999;
	}

	.attrPop-item_content {}

	.attrPop-btn {
		padding-bottom: 20rpx;
	}
</style>
